/* eslint-disable @typescript-eslint/no-use-before-define */
import { DictValueEnum } from "@/components/DictTag";
import { createIcon } from "@/utils/IconUtil";
import {
	ModalForm,
	ProForm,
	ProFormDigit,
	ProFormInstance,
	ProFormRadio,
	ProFormText,
	ProFormTextArea
} from "@ant-design/pro-components";
import { Button, Modal } from "antd";
import React, { useEffect, useMemo, useRef, useState } from "react";
import { formTitle } from "../constants";
import { DIYIconList } from "@/components/ProSelectIcon/components/constants";
import { getApp } from "@/services/api/module/system/application";
import IconModal from "@/components/ProSelectIcon/components/IconModal";
import IconFont from "@/components/IconFont";
import Icon, * as antIcons from "@ant-design/icons";
export type AppFormData = Record<string, unknown> & Partial<API.System.ApplicationBo>;
export type AppFormProps = {
	onCancel: (flag?: boolean, formVals?: AppFormData) => void;
	onSubmit: (values: AppFormData) => Promise<any>;
	open: boolean;
	idValue: number | undefined;
	statusOptions: DictValueEnum;
};
const AppForm: React.FC<AppFormProps> = props => {
	// 国际化
	const formRef = useRef<ProFormInstance>();
	const { open, statusOptions, idValue, onSubmit = () => {}, onCancel = () => {} } = props;
	const [menuIconName, setMenuIconName] = useState<any>();
	const [iconSelectorOpen, setIconSelectorOpen] = useState<boolean>(false);

	// 初始化
	useEffect(() => {
		formRef?.current?.resetFields();
		if (idValue) {
			setFormValue(idValue);
		}
	}, [formRef, props]);

	// 表单赋值
	const setFormValue = (id: number) => {
		getApp(id).then(res => {
			formRef?.current?.setFieldsValue(res);
			// console.log(res);
			// 	const { data } = res;
			// 	formRef?.current?.setFieldsValue({
			// 		id: id,
			// 		appName: data.appName,
			// 		code: data.code,
			// 		sort: data.sort,
			// 		status: data.status,
			// 		icon: data.icon,
			// 		appDescription: data.appDescription,
			// 		remark: data.remark
			// 	});
		});
	};
	// 关闭
	const handleCancel = () => {
		formRef?.current?.resetFields();
		onCancel();
	};
	// 表单提交
	const handleFinish = async (values: Record<string, any>) => {
		return onSubmit({
			...values,
			id: idValue ? idValue : undefined
		} as AppFormData);
	};
	const prefix = useMemo(() => {
		return formRef?.current?.getFieldValue("icon")?.startsWith("icon-") ? (
			<IconFont type={formRef?.current?.getFieldValue("icon")} />
		) : (
			<Icon component={(antIcons as Record<string, any>)?.[formRef?.current?.getFieldValue("icon")]} />
		);
	}, [formRef?.current?.getFieldValue("icon")]);
	return (
		<>
			<ModalForm<AppFormData>
				width={600}
				title={idValue ? formTitle[1] : formTitle[0]}
				open={open}
				formRef={formRef}
				grid={true}
				layout="vertical"
				modalProps={{
					destroyOnClose: true,
					onCancel: () => {
						handleCancel();
					}
				}}
				onFinish={handleFinish}
			>
				<ProFormText
					name="appName"
					label="应用名称"
					placeholder="请输入应用名称"
					rules={[
						{
							required: true,
							message: "请输入应用名称！"
						}
					]}
				/>
				<ProFormText
					name="appCode"
					label="应用编码"
					placeholder="请输入应用编码"
					rules={[
						{
							required: true,
							message: "请输入应用编码！"
						}
					]}
				/>
				<ProFormText
					width="lg"
					fieldProps={{
						prefix: prefix
					}}
					addonAfter={
						<Button
							onClick={() => {
								setIconSelectorOpen(true);
							}}
						>
							选择图标
						</Button>
					}
					rules={[
						{
							required: true,
							message: "请选择应用图标"
						}
					]}
					name="icon"
					label="应用图标"
					tooltip="应用图标"
					placeholder="请选择应用图标"
				/>
				<ProForm.Group>
					<ProFormDigit
						colProps={{ md: 12, xl: 12 }}
						name="sort"
						label="显示顺序"
						placeholder="请输入显示顺序"
						rules={[
							{
								required: true,
								message: "请输入显示顺序"
							}
						]}
						initialValue={0}
					/>
					<ProFormRadio.Group
						radioType="button"
						colProps={{ md: 12, xl: 12 }}
						valueEnum={statusOptions}
						name="status"
						label="应用状态"
						initialValue={"0"}
						placeholder="请选择应用状态"
						rules={[
							{
								required: true,
								message: "请选择应用状态"
							}
						]}
					/>
				</ProForm.Group>

				<ProFormTextArea
					name="appDescription"
					label="应用描述"
					placeholder="请输入应用描述"
					rules={[
						{
							required: true,
							message: "请输入应用描述"
						}
					]}
				/>
			</ModalForm>
			<IconModal
				modalProps={{
					zIndex: 1001
				}}
				open={iconSelectorOpen}
				onChange={(key: string) => {
					formRef?.current?.setFieldsValue({ icon: key });
					setIconSelectorOpen(false);
				}}
				// zIndex={1001}
				extendRender={{
					IconFont: IconFont,
					// @ts-ignore
					options: [{ label: "自定义", data: DIYIconList, key: "iconFont" }]
				}}
				cancel={() => {
					setIconSelectorOpen(false);
				}}
			/>
			{/* <Modal
				title="图标选择"
				width={800}
				open={iconSelectorOpen}
				onCancel={() => {
					setIconSelectorOpen(false);
				}}
				footer={null}
			>
				<IconSelector
					onSelect={(name: string) => {
						formRef.current?.setFieldsValue({ icon: name });
						setMenuIconName(name);
						setIconSelectorOpen(false);
					}}
				/>
			</Modal> */}
		</>
	);
};

export default AppForm;
